<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn>
        <el-button type="primary" @click="syncLogManageHandle">
          更新配置
        </el-button>
      </template>
    </pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:switch="scope">
        <el-switch
          :model-value="scope.row.status == 1"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="changeStatus(scope.row)"
        />
      </template>
    </pub-table>
    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>
  </list-page>
</template>

<script setup>
import { useTable } from '@/hooks/UseTable'
import { getLogManageList, logManageUpdate, syncLogManage } from '@/api/log.js'
import { ElMessage } from 'element-plus'
const searchColumns = ref([
  {
    label: '模块',
    el: 'Input',
    bind: 'moduleName',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '子模块',
    el: 'Input',
    bind: 'subModule',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '日志来源',
    el: 'Input',
    bind: 'subSystem',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '是否启用',
    el: 'DictSelect',
    code: 'SF',
    bind: 'status',
    defaultValue: '',
    labelWidth: 80
  }
])
const columns = ref([
  { label: '模块', prop: 'moduleName' },
  { label: '子模块', prop: 'subModule' },
  { label: '日志来源', prop: 'subSystem' },
  { label: '页面或功能', prop: 'func' },
  { label: '启用', prop: 'status', type: 'switch' }
])

let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(getLogManageList)

const changeStatus = row => {
  let newStatus
  if (row.status == 1) {
    newStatus = 0
    row.status = 0
  } else if (row.status == 0) {
    newStatus = 1
    row.status = 1
  }
  const params = {
    id: row.id,
    status: newStatus
  }
  logManageUpdate(params).then(result => {
    if (result.succeed) {
      ElMessage({
        type: 'success',
        message: result.msg
      })
      getList()
    }
  })
}

const syncLogManageHandle = () => {
  syncLogManage().then(result => {
    if (result.succeed) {
      ElMessage({
        type: 'success',
        message: result.msg
      })
      getList()
    }
  })
}

onMounted(() => {
  getList()
})
</script>
<style lang="scss" scoped></style>
